<template>
<div v-show="disPlayFlag">
    <div class="">
        <div slot="header" class="clearfix  job-tab-header">
            <span>功能菜单信息</span>
        </div>
        <div>
            <el-form :rules="rules" ref="targetForm" :model="temp" label-width="150px" label-position='right' size="small">
                <el-row :gutter="5">
                    <el-form-item label="上级节点" prop="parentid" size='small'>
                        <el-input v-model="temp.parentidSysPrivilegeName" :disabled="true"></el-input>
                    </el-form-item>
                    <el-form-item label="功能名称" prop="name" size='small'>
                        <el-input v-model="temp.name"></el-input>
                    </el-form-item>
                    <el-form-item label="节点排序" prop="sort" size='small'>
                        <el-input v-model="temp.sort"></el-input>
                    </el-form-item>
                    <el-form-item label="功能描述" prop="memo" size='small'>
                        <el-input v-model="temp.memo"></el-input>
                    </el-form-item>
                    <el-form-item label="功能英文名" prop="nameEnglish" size='small'>
                        <el-input v-model="temp.nameEnglish"></el-input>
                    </el-form-item>
                    <el-form-item label="URL地址" prop="url" size='small'>
                        <el-input v-model="temp.url"></el-input>
                    </el-form-item>
                    <el-form-item label="tab页展开id" prop="tabId" size='small'>
                        <el-input v-model="temp.tabId"></el-input>
                    </el-form-item>
                    <el-form-item label="菜单图片" prop="menuPic" size='small'>
                        <el-row>
                            <el-col :span="1">
                                <svg-icon :icon-class="temp.menuPic" />
                            </el-col>
                            <el-col :span="10">
                                <el-select v-model="temp.menuPic">
                                    <el-option v-for="item in menuPicOptions" :key="item.key" :label="item.display_name" :value="item.key">
                                        <svg-icon :icon-class="item.display_name" />
                                    </el-option>
                                </el-select>
                            </el-col>
                        </el-row>
                    </el-form-item>
                    <el-form-item label="功能类型" prop="menutype" size='small'>
                        <el-select v-model="temp.menutype">
                            <el-option v-for="item in menuTypeOptions" :key="item.key" :label="item.display_name" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="记录日志" prop="logflag" size='small'>
                        <el-select v-model="temp.logflag">
                            <el-option v-for="item in logFlagOptions" :key="item.key" :label="item.display_name" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="允许访问的时间段" prop="accessTime" size='small'>
                        <el-time-picker is-range range-separator="-" format="HH:mm" value-format="HHmm" start-placeholder="开始时间" end-placeholder="结束时间" v-model="temp.accessTime" clearable/>
                    </el-form-item>
                    <el-form-item label="使用的组件" prop="componentName" size='small'>
                        <el-select v-model="temp.componentName">
                            <el-option v-for="item in componentOptions" :key="item.key" :label="item.display_name" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="所属子系统" prop="subsysid" size='small'>
                        <el-select v-model="temp.subsysid" @focus="editSubSystemsOptions" :disabled="subsysid != null && subsysid != ''">
                            <el-option v-for="item in subSystemsOptions" :key="item.key" :label="item.display_name" :value="item.key">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-row>
            </el-form>
            <el-row :gutter="5" style="border-top:1px solid #e6e6e6; padding-top:20px;">
                <el-col style="text-align: right;">
                    <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
                    <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
                </el-col>
            </el-row>
        </div>
    </div>
</div>
</template>

<script>
import '@/styles/newstyle.scss'
import {
  insertItem,
  compositeSelect,
  updateItem,
  selectSysSubsys
} from '@/api/systemManage/menuEdit'
import {
  roleOptions,
  clickTypeOptions,
  statusOptions,
  organizationCategoryOptions,
  yesOrNoOptions,
  menuTypeOptions,
  logFlagOptions,
  componentOptions,
  menuPicOptions
} from '@/utils/allOptions'

export default {
  name: 'menuEdit',
  components: {},
  props: {
    parentId: {
      type: String,
      default: ''
    },
    parentName: {
      type: String,
      default: ''
    },
    editType: {
      type: String,
      default: '0'
    },
    subsysid: {
      type: String,
      default: ''
    },
    disPlayFlag: {
      type: Boolean,
      default: false
    },
    id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // -------Options-----------
      roleOptions,
      clickTypeOptions,
      statusOptions,
      organizationCategoryOptions,
      yesOrNoOptions,
      menuTypeOptions,
      logFlagOptions,
      componentOptions,
      menuPicOptions,
      // -------Options-----------
      temp: {
        id: '',
        name: '',
        menutype: '',
        url: '',
        memo: '',
        logflag: '',
        parentid: '',
        cuserid: '',
        cdate: '',
        euserid: '',
        edate: '',
        sort: '',
        accessTime: ['', ''],
        subsysid: '',
        tabId: '',
        menuPic: '',
        nameEnglish: '',
        componentName: '',
        parentidSysPrivilegeId: '',
        parentidSysPrivilegeName: ''
      },
      subSystemsOptions: [],
      rules: {
        name: [{
          required: true,
          message: '请输入功能名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        menutype: [{
          required: true,
          message: '请输入功能类型',
          trigger: 'blur'
        }],
        url: [{
          required: true,
          message: '请输入URL地址',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 200,
          message: '长度在 0 到 200 个字符',
          trigger: 'blur'
        },
        {
          max: 200,
          message: '最大 200 个字符',
          trigger: 'blur'
        }
        ],
        memo: [{
          min: 0,
          max: 400,
          message: '长度在 0 到 400 个字符',
          trigger: 'blur'
        },
        {
          max: 400,
          message: '最大 400 个字符',
          trigger: 'blur'
        }
        ],
        logflag: [{
          required: true,
          message: '请输入记录日志',
          trigger: 'blur'
        }],
        parentid: [],
        sort: [{
          required: true,
          message: '请输入节点排序',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 10,
          message: '长度在 0 到 10 个字符',
          trigger: 'blur'
        },
        {
          max: 10,
          message: '最大 10 个字符',
          trigger: 'blur'
        }
        ],
        subsysid: [{
          min: 0,
          max: 32,
          message: '长度在 0 到 32 个字符',
          trigger: 'blur'
        },
        {
          max: 32,
          message: '最大 32 个字符',
          trigger: 'blur'
        }
        ],
        tabId: [{
          min: 0,
          max: 200,
          message: '长度在 0 到 200 个字符',
          trigger: 'blur'
        },
        {
          max: 200,
          message: '最大 200 个字符',
          trigger: 'blur'
        }
        ],
        menuPic: [{
          min: 0,
          max: 50,
          message: '长度在 0 到 50 个字符',
          trigger: 'blur'
        },
        {
          max: 50,
          message: '最大 50 个字符',
          trigger: 'blur'
        }
        ],
        nameEnglish: [{
          required: true,
          message: '请输入功能英文名',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 50,
          message: '长度在 0 到 50 个字符',
          trigger: 'blur'
        },
        {
          max: 50,
          message: '最大 50 个字符',
          trigger: 'blur'
        }
        ],
        componentName: [{
          required: true,
          message: '请选择组件',
          trigger: 'blur'
        }]
      }
    }
  },
  mounted() {
    if (this.disPlayFlag) {
      this.editSubSystemsOptions()
      this.editForm()
    }
  },
  watch: {
    disPlayFlag: {
      handler: function(val, oldVal) {
        if (this.disPlayFlag) {
          console.log('subsysid', this.subsysid)
          console.log('parentId', this.parentId)
          this.editSubSystemsOptions()
          this.editForm()
        }
      },
      immediate: true
    }
  },
  methods: {
    editSubSystemsOptions() {
      const query = {
        fields: ['subsysid', 'subsysname'],
        sort: [{
          direction: 'ASC',
          property: 'subsysid'
        }]
      }

      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.key = item.subsysid
            input.display_name = item.subsysname
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    editForm() {
      console.log(this.editType)
      console.log(this.parentId)
      if (this.editType === '0') {
        this.temp.parentidSysPrivilegeId = this.parentId
        this.temp.parentidSysPrivilegeName = this.parentName
        this.temp.subsysid = this.subsysid
      } else {
        const searchCon = {
          condition: {
            id: {
              property: 'id',
              value: this.parentId,
              type: 'EQ'
            }
          },
          fields: [
            'id',
            'name',
            'menutype',
            'url',
            'memo',
            'logflag',
            'parentid',
            'cuserid',
            'cdate',
            'euserid',
            'edate',
            'sort',
            'accessStart',
            'accessEnd',
            'subsysid',
            'tabId',
            'menuPic',
            'nameEnglish',
            'componentName',
            'parentidSysPrivilegeId',
            'parentidSysPrivilegeName'
          ]
        }
        compositeSelect(searchCon).then(response => {
          if (response.data.data.count > 0) {
            const resData = response.data.data.records[0]
            this.temp = Object.assign({}, resData) // copy obj   this.subSystemsOptions.push(input);
            if (resData.accessStart) {
              this.temp.accessTime = [resData.accessStart, resData.accessEnd]
            } else {
              this.temp.accessTime = ['', '']
            }

            this.temp.sort = '' + this.temp.sort
          }
        })
      }
    },
    resetAll() {
      this.temp = {
        id: '',
        name: '',
        menutype: '',
        url: '',
        memo: '',
        logflag: '',
        parentid: '',
        cuserid: '',
        cdate: '',
        euserid: '',
        edate: '',
        sort: '',
        accessTime: '',
        subsysid: '',
        tabId: '',
        menuPic: '',
        nameEnglish: '',
        componentName: '',
        parentidSysPrivilegeId: '',
        parentidSysPrivilegeName: ''
      }
      this.$refs.targetForm.clearValidate()
    },
    closeSelf() {
      this.resetAll()
      this.$emit('closeMe')
    },
    saveData() {
      const targetData = {
        id: this.temp.id,
        name: this.temp.name,
        menutype: this.temp.menutype,
        url: this.temp.url,
        memo: this.temp.memo,
        logflag: this.temp.logflag,
        parentid: this.temp.parentidSysPrivilegeId,
        sort: this.temp.sort,
        accessStart: this.temp.accessTime[0],
        accessEnd: this.temp.accessTime[1],
        subsysid: this.temp.subsysid,
        tabId: this.temp.tabId,
        menuPic: this.temp.menuPic,
        nameEnglish: this.temp.nameEnglish,
        componentName: this.temp.componentName
      }
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          if (this.editType === '1') {
            updateItem(targetData.id, targetData).then(() => {
              this.resetAll()
              this.$notify({
                title: '成功',
                message: '更新成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('closeMe')
            })
          } else {
            insertItem(targetData).then(() => {
              this.resetAll()
              this.$notify({
                title: '成功',
                message: '创建成功',
                type: 'success',
                duration: 2000
              })
              this.$emit('closeMe')
            })
          }
        }
      })
    }
  }
}
</script>
